<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成易博客-博客内容修改</title>

    <link th:replace="common/common::common-head">
    <div th:replace="common/common :: #common-js"></div>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body style="background: rgba(243,240,240,0.27);padding-top: 70px; ">

    <div th:replace="common/common :: #common-top-nav"></div>

    <span class="layui-breadcrumb" lay-separator="ㅣ">
      <a th:href="@{/user/home}">首页</a>
      <a th:href="@{/user/blog}">博客</a>
      <a th:href="@{/blog/myBlogList}">我的博客</a>
      <a><cite>博客修改</cite></a>
    </span>

    <div id="blogEdit" v-cloak>
        <el-container>
            <!--       main 主内容区域     -->
            <el-main>
                <el-row type="flex" class="row-bg" justify="center">

                    <el-card class="box-card">
                        <el-row type="flex" class="row-bg" justify="center">
                            <el-form :model="ruleForm" :rules="rules" id="ruleForm" ref="ruleForm" :status-icon="true">

                                <input id="id" name="id" type="hidden" th:value="${id}"/>

                                <el-row type="flex" class="row-bg" justify="center">
                                    <el-col :span="24" :xs="24">
                                        <el-form-item label="博客标题" prop="title">
                                            <el-input v-model="ruleForm.title" placeholder="请输入博客标题"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row type="flex" class="row-bg" justify="center">
                                    <el-col :span="24" :xs="24">
                                        <el-form-item label="博客标签" prop="memo">
                                            <el-select v-model="ruleForm.memo" placeholder="请选择博客标签" filterable="true">
                                                <!--   后期从数据库中获取标签   -->
                                                <el-option label="日记" value="日记"></el-option>
                                                <el-option label="备忘录" value="备忘录"></el-option>
                                                <el-option label="问题" value="问题"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>


                                <el-row type="flex" class="row-bg" justify="center">
                                    <el-col :span="24" :xs="24">
                                        <el-form-item label="博客状态" prop="status">
                                            <el-switch v-model="ruleForm.status"></el-switch>
                                                <span v-if="ruleForm.status == false">私密</span>
                                                <span v-if="ruleForm.status == true">公开</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>


                                <el-row type="flex" class="row-bg" justify="center">
                                    <el-col :span="24" :xs="24">
                                        <el-form-item label="博客内容">
                                        </el-form-item>
                                        <div id="value">
                                            <div v-html="ruleForm.value">

                                            </div>
                                        </div>
                                    </el-col>
                                </el-row>

                                <el-row type="flex" class="row-bg" justify="center">
                                    <el-col :offset="8">
                                        <el-form-item>
                                            <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
<!--                                            <el-button @click="resetForm('ruleForm')">重置内容</el-button>-->
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                            </el-form>
                        </el-row>
                    </el-card>

                </el-row>
            </el-main>
        </el-container>

    </div>

    <script th:src="@{/static/js/blog/my_blog_update.js}"></script>

    <div th:replace="common/common :: #common-bottom"></div>

</body>
</html>